<template>
    <div class="app-container">
        <div class="params head-form">
            <el-form>
                <div class="params-form">
                    <el-form-item label='合作方类型'>
                        <el-select placeholder="请选择" v-model="params.partnerType" style="width: 250px" @change="init">
                            <el-option v-for="item, index in type" :value='index' :label="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='合作方名称'>
                        <el-input style="width: 250px" @blur="init" @keyup.enter="init" v-model="params.name"
                            placeholder="请输入" />
                    </el-form-item>
                    <el-form-item>
                        <div class="interval">
                            <el-select v-model="params.billType" placeholder="请选择" style="width: 170px" @change="init">
                                <el-option v-for="item, index in balance" :label="item" :value="index" />
                            </el-select>
                            <div>
                                <input type="text" placeholder="请输入数字" v-model="params.minValue" @blur="init">
                                <div class="between">介于</div>
                                <input type="text" placeholder="请输入数字" v-model="params.maxValue" @blur="init">
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="total">合计金额<span>（所有筛选记录）</span></div>
        <div class="amount">
            <div>余额：<span>￥{{ count.balance }}</span></div>
            <div>订单收款单：<span>￥{{ count.orderReceipt }}</span></div>
            <div>采购付款单：<span>￥{{ count.orderPayment }}</span></div>
            <div>预收款单：<span>￥{{ count.notUseMoney }}</span></div>
            <div>预付款单：<span>￥{{ count.advancePaymentSlip }}</span></div>
            <div>其他收款单：<span>￥{{ count.otherReceipt }}</span></div>
            <div>报销付款单：<span>￥{{ count.reimbursementPayment }}</span></div>
            <div>借款付款单：<span>￥{{ count.loanBillPaymentSlip }}</span></div>
            <div>借款还款单：<span>￥{{ count.loanRepaymentSlip }}</span></div>
            <div>退款付款单：<span>￥{{ count.refundPaymentSlip }}</span></div>

        </div>
        <div class="table">
            <el-table :data="data" style="width: 100%" max-height="calc(100vh - 450px)" @sort-change='sortChange'>
                <el-table-column prop="partner" label="合作方" width="200" />
                <el-table-column prop="balance" label="余额（正数为应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.balance }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderReceipt" label="订单收款单（应收）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.orderReceipt }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderPayment" label="采购付款单（应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.orderPayment }}
                    </template>
                </el-table-column>
                <el-table-column prop="notUseMoney" label="预收款（应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.notUseMoney }}
                    </template>
                </el-table-column>
                <el-table-column prop="advancePaymentSlip" label="预付款（应收）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.advancePaymentSlip }}
                    </template>
                </el-table-column>
                <el-table-column prop="otherReceipt" label="其他收款单（应收）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.otherReceipt }}
                    </template>
                </el-table-column>
                <el-table-column prop="reimbursementPayment" label="报销付款单（应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.reimbursementPayment }}
                    </template>
                </el-table-column>
                <el-table-column prop="loanBillPaymentSlip" label="借款付款单（应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.loanBillPaymentSlip }}
                    </template>
                </el-table-column>
                <el-table-column prop="loanRepaymentSlip" label="借款还款单（应收）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.loanRepaymentSlip }}
                    </template>
                </el-table-column>
                <el-table-column prop="refundPaymentSlip" label="退款付款单（应付）" sortable="custom" width="200">
                    <template #default="scope">
                        ￥{{ scope.row.refundPaymentSlip }}
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty />
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="query.current" v-model:page-size="query.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="init" @current-change="init" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight } from '@element-plus/icons-vue';
import { getList, statistics } from "@/apis/reconciliation";
import { type } from "@/utils/config";

const balance = {
    balance: '余额', orderReceipt: '订单收款金额', orderPayment: '采购付款金额', notUseMoney: '预付款未使用金额', otherReceipt: '其他收款单'
}
const query = ref({
    current: 1,
    size: 10
})
const params = ref({})
const reset = () => {
    params.value = {}
    init()
}

const total = ref(0);
const data = ref([]);
const count = ref({})

const init = async () => {
    const have = params.value.billType && params.value.maxValue && params.value.minValue;
    const not = !params.value.billType && !params.value.maxValue && !params.value.minValue;
    if (have || not) {
        const res = await getList(query.value, params.value);
        data.value = res.data.list;
        total.value = res.data.total;
        const counts = await statistics(params.value);
        count.value = counts.data ? counts.data : {}
    }
}
const sortChange = ({ column, prop, order }) => {
    if (!order) {
        delete params.value.sortColumn;
    } else {
        params.value.sortColumn = {
            column: prop,         
            sortDirection: order == 'descending'
        }
    }
    init();
}
onMounted(() => {
    init()
})
</script>

<style lang="scss" scoped>
@import '../invoices/comon.scss';

.params-form {
    grid-template-columns: repeat(3, 2fr) 1fr !important;
}

.interval {
    display: flex;
    background: #F6F8FA;

    ::v-deep(.el-select__wrapper) {
        border-radius: 4px 0 0 4px;
    }

    >div:last-child {
        display: flex;
        height: 32px;
        box-sizing: border-box;
        border-radius: 0 4px 4px 0;
        padding-right: 10px;
        border-left: none;
        align-items: center;
        border-left: $border;

        input {
            outline: none;
            border: none;
            padding: 0 10px;
            color: #606266;
            background: #F6F8FA;
            width: 46%;

            &::placeholder {
                color: #C0C4CC;
            }
        }

        .between {
            width: 40px;
            white-space: nowrap;
        }
    }
}

::v-deep(.el-table tr .cell) {
    align-items: center;
}

.amount {
    min-height: 46px;
    height: auto;
    background: #F2F6FC;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    line-height: 46px;
    margin: 10px auto;

    >div {
        padding-left: 20px;

        span {
            color: #3D3D3D;
        }
    }
}
</style>
